import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:osg/controllers/custom_widget.dart'; 


class Mall extends StatefulWidget {
  const Mall({super.key});
  @override
  State<Mall> createState() => _HomePageState();
}

class _HomePageState extends State<Mall> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
      
  }

  @override
  Widget build(BuildContext context) {
    final totalHeight = MediaQuery.of(context).padding.top + 15;
    final screenWidth = MediaQuery.of(context).size.width;
    final spacing = 12.0; // 间距
    final itemWidth = (screenWidth - spacing) / 2;
    const itemHeight = 180.0; // 固定高度

    return  Scaffold(
      body: ListView(
        children: [
          Container(
              padding: EdgeInsets.only(
                  top: totalHeight, left: 15, right: 15, bottom: 16),
              color: Color(0XFF542AFF),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        onTap: (){
                          Get.back();
                        },
                        child:  Image.asset(
                        'static/web/bclose.png',
                        width: 16,
                        fit: BoxFit.fitWidth,
                      ),
                      )
                     ,
                      Image.asset(
                        'static/web/shoptitle.png',
                        width: 110,
                        fit: BoxFit.fitWidth,
                      ),
                      GestureDetector(
                        onTap: ()=>{
                          Get.toNamed('/web_tabs/shopping/mall_address')
                        },
                        child:Text('收货地址',
                          style: TextStyle(
                              fontSize: 12, color: Color(0XFFFFFFFF))),
                      )
                      
                    ],
                  ),
                  SizedBox(height: 20,),
                  Container(
                    height: 16,
                    decoration: BoxDecoration(
                        color: Color(0XFF0F172B),
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(16),
                          topRight: Radius.circular(16),
                        )),
                  )
                ],
              )),
          Transform.translate(
            offset: Offset(0, -20),
            child: Container(
              padding: EdgeInsets.only(top: 10),
              decoration: BoxDecoration(
                color: Color(0XFFFFFFFF),
                borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              )),
              child: Row(
                children: [
                  SizedBox(
                    width: 150,
                    child: 
                  TabBar(
                      indicatorColor: Color(0XFF542AFF),
                      indicatorWeight: 3.0,
                      labelColor: Color(0XFF0F172B),
                      labelPadding: EdgeInsets.symmetric(vertical: 5),
                      unselectedLabelColor: Color(0xff999999),
                      dividerColor: Colors.transparent,
                      indicatorPadding: EdgeInsets.only(right: 30, left: 30),
                       dividerHeight: 3,
                       indicatorSize:TabBarIndicatorSize.tab,
                      controller: _tabController,
                      overlayColor: WidgetStateProperty.all(Colors.transparent),
                      tabs: [
                        Text(
                          '兑藏品',
                          style: TextStyle(fontSize: 14),
                        ),
                        Text(
                          '兑SP',
                          style: TextStyle(fontSize: 14),
                        )
                      ]),

                  ),
                  Expanded(child: SizedBox()),
                  Text('0',style: TextStyle(fontSize: 23,color: Color(0XFF0F172B))),
                  SizedBox(width: 5,),

                  Image.asset('static/web/jinbi.png',width: 16,fit: BoxFit.fitWidth,),
                  SizedBox(width: 5,),

                  Image.asset('static/web/ringbain.png',width: 5,fit: BoxFit.fitWidth,),
                  SizedBox(width: 15,)
                ],
              ),
            ),
          ),
          Padding(padding: EdgeInsets.symmetric(horizontal: 15),
          child:  Lise(spacing, itemWidth, itemHeight),
          ),
          isdata()
         

        ],
      ),
    );

     
  }
}

Widget Lise(spacing, itemWidth, itemHeight) {
  return GridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: spacing,
    mainAxisSpacing: spacing,
    childAspectRatio: itemWidth / 260,
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    children: List.generate(0, (index) {
      return GestureDetector(
        onTap: ()=>{
          Get.toNamed('/web_tabs/shopping/mall_detail')
        },
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15),
                topRight: Radius.circular(15),
              ),
              child: Image.asset(
                'static/aaa.png',
                width: 162,
                height: 162,
                fit: BoxFit.fill,
              ),
            ),
            Text('商品名称名称名称名称',style: TextStyle(fontSize: 14,color: Color(0XFF0F172B),fontWeight: FontWeight.bold)),
            Text('已兑换200份',style: TextStyle(fontSize: 12,color: Color(0XFF999999))),
            SizedBox(height: 5,),
            Row(children: [
              Text('9900',style: TextStyle(fontSize: 18,color: Color(0XFF0F172B))),
              SizedBox(width: 3,),
                Image.asset('static/web/jinbi.png',width: 11,fit: BoxFit.fitWidth,),
            ],)
       
      ]),
      )
      
      ;
    }),
  );
}